<template>
  <div class="form-config-container">
    <a-form :model="data" layout="vertical">
      <a-form-item label="表单名称" :rules="[{ required: true, message: '请输入表单名称', trigger: 'blur' }]">
        <a-input v-model:value="data.formName" placeholder="表单名称"></a-input>
      </a-form-item>
      <a-form-item
        v-if="isConfig()"
        label="适用应用"
        name="appId"
        :rules="[{ required: true, message: '请选择适用应用', trigger: 'change' }]"
      >
        <a-select
          v-model:value="data.appId"
          :get-popup-container="
            (triggerNode) => {
              return triggerNode.parentNode
            }
          "
          placeholder="请选择"
          @change="changeAppId"
        >
          <a-select-option v-for="(item, index) in appIdList" :key="index" :value="item.appId">
            {{ item.appName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="表单类型"
        name="formType"
        :rules="[{ required: true, message: '请选择表单类型', trigger: 'change' }]"
      >
        <a-select
          v-model:value="data.formType"
          :get-popup-container="
            (triggerNode) => {
              return triggerNode.parentNode
            }
          "
          placeholder="请选择"
        >
          <a-select-option v-for="(item, index) in formTypeList" :key="index" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="试验类型" name="projectType">
        <DictFormItem
          v-model:value="data.projectType"
          app-code="CONFIG"
          flag="PROJECT_TYPE"
          placeholder="试验类型"
          :is-http="true"
        />
      </a-form-item>
      <a-form-item label="表单描述">
        <a-input v-model:value="data.formDesc" placeholder="表单描述"></a-input>
      </a-form-item>
      <a-form-item v-if="route.query.id" label="创建人" name="createUserName">
        <a-input v-model:value="data.createUserName" disabled placeholder="创建人"></a-input>
      </a-form-item>
      <a-form-item v-if="route.query.id" label="创建时间" name="createTime">
        <a-input v-model:value="data.createTime" disabled placeholder="创建时间"></a-input>
      </a-form-item>
      <a-form-item v-if="route.query.id" label="最后编辑人" name="lastEditUserName">
        <a-input v-model:value="data.lastEditUserName" disabled placeholder="最后编辑人"></a-input>
      </a-form-item>
      <a-form-item v-if="route.query.id" label="最后编辑时间" name="lastEditTime">
        <a-input v-model:value="data.lastEditTime" disabled placeholder="最后编辑时间"></a-input>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts" name="AntdFormConfig">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
// import { formTypeOptions } from '@@/components/TaskKanban/FormConfig/components/index'
import { isConfig } from '@@/utils/index'
import { appLoadList } from '@@/api/common'
import { getDictdata } from '@@/api/portal/dictdata'

const props = defineProps<{ config: any }>()
const emits = defineEmits(['update:config'])
const route = useRoute()

const data = computed({
  get: () => props.config,
  set: (param) => emits('update:config', param)
})
const appIdList = ref()
const getAppIdList = () => {
  appLoadList({
    pageSize: 100,
    pageNum: 1
  }).then((res) => {
    appIdList.value = res.list
    getFormTypeList()
  })
}
const changeAppId = () => {
  data.value.formType = ''
  getFormTypeList()
}
const formTypeList = ref<any>([])
const getFormTypeList = () => {
  let flag = window.location.href.includes('/pharmacy/') ? 'Pharmacy' : 'CTMS'
  const appId = data.value.appId
  if (isConfig()) {
    // 运维端
    if (!appId) {
      formTypeList.value = []
      return
    }
    flag = appIdList.value.find((item) => item.appId === appId)?.appCode
  }
  getDictdata({
    appCode: 'CTMS-OPERATION',
    flag
  }).then((res) => {
    formTypeList.value = res[flag] || []
    // formType是int,字典返回格式为string,强制转换格式
    formTypeList.value.forEach((item) => {
      item.value = Number(item.value)
    })
  })
  // 获取接口
}
getAppIdList()
defineExpose({
  getFormTypeList
})
</script>
